<template>
  <!--页面头部-->
  <div id="searchss">
    <div class="search">
      <div class="logo" @click="toIndex">
        <a><img src="@/assets/img/logo.jpg"/></a>
      </div>
      <div class="sear_input">
        <div>
          <input type="text" v-model="keyword" placeholder="可搜索你想要的商品">
          <button @click="toSearch">
            <i class="iconfont icon-icon--"></i>
          </button>
        </div>
      </div>
      <div class="sera_cart">
        <a @click="toCart">
          <p><i class="iconfont icon-gouwuche5"></i>我的购物车</p>
        </a>
      </div>

      <div class="sear_fir" v-if="!isLogin">
        <div class="sinup">
          <a @click="$router.push({ name: 'login' })">登录</a>
          <a>/</a>
          <a @click="$router.push({ path: '/register' })">注册</a>
        </div>
        <div class="sinup" @click="toMangerSystem">
          <a target="_blank">后台管理</a>
        </div>
      </div>

      <div class="sear_fir" v-else>
        <div class="sigin">
          <span class="wel" id="wel" v-if="isLogin">Hi,{{ username }}</span>
        </div>
        <div class="my" @mouseenter="check = !check" @mouseleave="check = !check">
          <a>个人中心</a>
          <i class="iconfont icon-zheng-triangle1"></i>
          <div class="ds">
            <ul class="uls" v-show="check">
              <li><a @click="toOrder">我的订单</a></li>
              <li><a>收货地址</a></li>
              <li><a>修改密码</a></li>
              <li><a @click="logout">退出</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Header',
  data() {
    return ({
      isLogin: false,
      keyword: '',
      check: false,
    })
  },
  computed:{
    username:function(){
      return this.$store.state.user.username
    }
  },
  mounted() {
    this.$bus.$on('reload',this.reload)
    if (localStorage.getItem("user") != 'null') {
      this.$store.state.user = JSON.parse(localStorage.getItem("user"))
      this.isLogin = true
    } else {
      this.isLogin = false
    }
  },
  methods: {
    toOrder(){
      this.$router.push('order')
    },
    toMangerSystem(){
      this.$message.warning('功能暂未开放！')
    },
    toCart(){
      if(this.$store.state.user==null){
        this.$message.warning('请先登录!')
        return
      }
      this.$router.push('cart')
    },
    logout() {
      localStorage.setItem("user", null)
      this.$store.state.user = null
      this.isLogin = false
    },
    reload() {
      console.log("reload");
      if (localStorage.getItem("user") != 'null') {
        this.$store.state.user = JSON.parse(localStorage.getItem("user"))
        this.isLogin = true
      } else {
        this.isLogin = false
      }
      this.$nextTick()
    },
    toSearch(){
      if(this.keyword==''){
        this.$message.warning('请输入要查询的内容')
        return
      }
      console.log(this.keyword);
      this.$router.push({path:'/searchGoods',query:{goodsName:this.keyword}}).catch(err=>console.log(err))
    },
    toIndex(){
      this.$router.push('/').catch(err=>console.log(err))
    }
  }
}
</script>

<style scoped>
@import url('@/assets/css/search.css');
</style>